<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$store_title}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/public/mobile/css/common.css">
    <link rel="stylesheet" href="/public/mobile/css/index.css">
</head>
<body class="game" style="position: relative;">
    <div class="title">
        <img src="/public/mobile/img/logo.png" class="logo" alt="">
        <div>
           <img src="/public/mobile/img/game_time.png" alt="" class="game_time_txt">
            <div class="time_game_box">
                <p class="times_bg">
                    <span class="times" id="times">15</span><em class="second">s</em>
                </p>
            </div>
        </div>
    </div>

    <div class="content">
       <!-- <div class="item">
            <img src="/public/mobile/img/chicken1.png" alt="">+200
        </div>-->
    </div>
    <footer class="get_board">
        <div>
            <img src="/public/mobile/img/score1.png" id="scoreLevel" class="score_img" alt="">
        </div>
        <div class="score_box">火热值 <span class="score" id="score">0</span></div>
    </footer>

    <!--游戏开始弹窗-->
    <div class="start_box">
        <div class="start_pop_box">
            <!--<img src="/public/mobile/img/icon_x.png" class="icon_x" alt="">-->
            <img src="/public/mobile/img/game_s.png" class="title_img" alt="">
            <p>限时15S内,疯狂点击KFC火热能量吧！</p>
            <img src="/public/mobile/img/game_start.png" class="game_btn" id="game_start" alt="">
        </div>
    </div>
    <!--end of 游戏开始弹窗-->
    <!--游戏结束弹窗-->
    <div class="mask hide" id="game_end">
        <div class="end_box">
            <img src="/public/mobile/img/icon_x.png" class="icon_x" id="game_close" alt="">
            <div class="end_pop_box">
                <img src="/public/mobile/img/gxn.png" class="title_img" alt="">
                <p>成功收集<span id="scoreEnd">0</span>火热能量</p>
            </div>
            <img src="/public/mobile/img/see_rank.png" id="see_btn" class="see_btn" alt="">
        </div>
    </div>
    <audio src="/public/mobile/audio/game.mp3" preload="auto" loop="loop" id="BGmusic"></audio>
    <!--end of游戏结束弹窗-->
<script src="/public/mobile/js/jquery.min.js"></script>
<script src="/public/mobile/js/public.js"></script>
<script>
    function random(min,max) {
        return parseInt(Math.random()*(max-min)+min);
    }
    $(document).ready(function(){
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        //if(isiOS){
            document.body.addEventListener('touchmove', function (e) {
                e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
            }, {passive: false});
        //}
    });
    var imgArr=["/public/mobile/img/chicken1.png","/public/mobile/img/chicken2.png","/public/mobile/img/light.png"];
    var scoreUser=0;
    var gameInter,gameTime=15;
    var gameDown;
    var width=document.body.clientWidth;
    var height=document.body.clientHeight;
    //倒计时15秒
    function gameTimeDown() {
        gameDown=setInterval(function () {
            if(gameTime>0){
                gameTime=gameTime-1;
            }else{
                gameTime=0;
                clearInterval(gameDown)
            }
            $("#times").text(gameTime);
        },1000)
    }
    var rem=parseInt(40*width/750);
    var contentMinLeft = 5;
    var contentMaxLeft = width - 3.5 * rem - 5;
    var contentMinTop =  5;
    var contentMaxTop = height - parseInt(14 * rem)  - 40;
    function gameStart() {
        var oid="item"+new Date().getTime();
        var scoreO=random(50,100),scoreTextO="+"+scoreO
        var html='<div class="item" id="'+oid+'" data-score="'+scoreO+'" style="top:'+random(contentMinTop,contentMaxTop)+'px;left:'+random(contentMinLeft,contentMaxLeft)+'px;opacity: 0;"><img src="/public/mobile/img/chicken1.png" alt="">'+scoreTextO+'</div>';
        $(".content").append(html);
        var time=random(100,250);
        $("#"+oid).animate({opacity:1},time,function () {
            var existTime=random(100,300);
            setTimeout(function () {
                var endTime=random(100,250);
                $("#"+oid).animate({opacity:0},endTime,function () {
                    $("#"+oid).remove()
                })
            },existTime)
        })
        gameInter=setInterval(function () {
            if(gameTime<=0){
                clearInterval(gameInter);
                $(".content .hide").remove();
                $("#game_end").removeClass("hide");
                var audio = document.getElementById("BGmusic");
                audio.pause();
                if (window.WeixinJSBridge) {
                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                        setTimeout(function () {
                            var audio = document.getElementById("BGmusic");
                            audio.pause();
                        },500)
                    }, false);
                } else {
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                            setTimeout(function () {
                                var audio = document.getElementById("BGmusic");
                                audio.pause();
                            },500)
                        });
                    }, false);
                }
                $.post("/index.php/api/Api/get_number  ",{number:scoreUser},function (res) {
                    var r = JSON.parse(res);
                    console.log("get Number",r);
                })
                return true;
            }
            var scoreRange=random(0,3)
            var imgSrc=imgArr[scoreRange];
            var score=0;
            if(scoreRange==2){
                score=random(1,50)
            }else{
                score=random(50,100)
            }
            var scoreText="+"+score;
            var left=random(contentMinLeft,contentMaxLeft),top=random(contentMinTop,contentMaxTop)
            var id="item"+new Date().getTime()
            var html='<div class="item hide" id="'+id+'" data-score="'+score+'" style="top:'+top+'px;left:'+left+'px;opacity: 0;"><img src="'+imgSrc+'" alt="">'+scoreText+'</div>';
            var appearTime = random(700,2000);
            $(".content").append(html);
            setTimeout(function () {
                var time=random(100,250);
                $("#"+id).removeClass("hide").animate({opacity:1},time,function () {
                    var existTime=random(100,300);
                    setTimeout(function () {
                        var endTime=random(100,250);
                        $("#"+id).animate({opacity:0},endTime,function () {
                            $("#"+id).remove()
                        })
                    },existTime)
                })
            },appearTime)


        },300)
    }
    $().ready(function () {
        $("body").css("height",height);
        if(height/width>=1.70){
            $("body").css("backgroundImage","url('/public/mobile/img/game_bgx.jpg')")
        }
        //用户点击 记录分数
        $(".content").on("touchstart",".item",function () {
            var score=parseInt($(this).data("score"));
            scoreUser=scoreUser+score;
            if(scoreUser>300&&scoreUser<600){
                $("#scoreLevel").attr("src","/public/mobile/img/score2.png")
            }else if(scoreUser>=600&&scoreUser<900){
                $("#scoreLevel").attr("src","/public/mobile/img/score3.png")
            }else if(scoreUser>=900&&scoreUser<1200){
                $("#scoreLevel").attr("src","/public/mobile/img/score4.png")
            }else if(scoreUser>=1200&&scoreUser<1500){
                $("#scoreLevel").attr("src","/public/mobile/img/score5.png")
            }
            $("#score").text(scoreUser);
            $("#scoreEnd").text(scoreUser);
            $(this).remove()
        })
        //游戏开始
        $("#game_start").on("click",function () {
            $(".start_box").addClass("hide");
            gameStart(); gameTimeDown();
            var audio = document.getElementById("BGmusic");
            audio.play();
            if (window.WeixinJSBridge) {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    setTimeout(function () {
                        var audio = document.getElementById("BGmusic");
                            audio.play();
                    },500)
                }, false);
            } else {
                document.addEventListener("WeixinJSBridgeReady", function () {
                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                        setTimeout(function () {
                            var audio = document.getElementById("BGmusic");
                                audio.play();
                        },500)
                    });
                }, false);
            }
        })
        //查看排名
        $("#see_btn,#game_close").on("click",function () {
            location.href='/mobile/index/rank.html'
        })
    })
</script>
<script>
    // 微信配置
    wx.config({
        debug: false,
        appId: "{$signPackage['appId']}",
        timestamp: '{$signPackage["timestamp"]}',
        nonceStr: '{$signPackage["nonceStr"]}',
        signature: '{$signPackage["signature"]}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareQZone']
        // 功能列表，我们要使用JS-SDK的什么功能
    });

    //  var ShareLink = "http://{$_SERVER['HTTP_HOST']}"; //默认分享链接
    var ShareLink = "{$data_share['link']}"; //默认分享链接
    var ShareImgUrl ="{$data_share['imgUrl']}"; // 分享图标
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在 页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。
    wx.ready(function(){
        // 获取"分享到朋友圈"按钮点击状态及自定义分享内容接口
        wx.onMenuShareTimeline({
            title: " {$data_share['title']}", // 分享标题
            link:ShareLink,
            imgUrl:ShareImgUrl ,// 分享图标
            success: function () {

            },
            cancel: function () {

            }
        });

        // 获取"分享给朋友"按钮点击状态及自定义分享内容接口
        wx.onMenuShareAppMessage({
            title: "{$data_share['title']}", // 分享标题
            desc: "{$data_share['desc']}", // 分享描述
            link:ShareLink,
            imgUrl:ShareImgUrl ,// 分享图标
            success: function () {

            },
            cancel: function () {

                // 用户取消分享后执行的回调函数
            }
        });
        // 分享到QQ
        wx.onMenuShareQQ({
            title: "{$data_share['title']}", // 分享标题
            desc: "{$data_share['desc']}", // 分享描述
            link:ShareLink,
            imgUrl:ShareImgUrl ,// 分享图标
            success: function () {

            },
            cancel: function () {

            }
        });
        // 分享到QQ空间
        wx.onMenuShareQZone({
            title: "{$data_share['title']}", // 分享标题
            desc: "{$data_share['desc']}", // 分享描述
            link:ShareLink,
            imgUrl:ShareImgUrl ,// 分享图标
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
<script>
    var _mtac = {};
    (function() {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500690473");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
</script>
</body>
</html>